<template>
  <!-- 用户列表页面 -->
  <div class="userlist">
    <!-- 头部搜索 -->
    <Input />
    <!-- 中间列表 -->
    <userlist :userlist="newuserlist" />
  </div>
</template>

<script>
import Input from "@/components/message/Input";
import userlist from "@/components/users/userList";
import { getAlluser } from "@/api/data";
export default {
  data() {
    return {
      userlist: [],
      idlist:[],
    };
  },

  components: {
    Input,
    userlist,
    
  },
  computed: {
    newuserlist() {
      if (
        (this.$store.state.newuser != null &&
          this.idlist.includes(this.$store.state.newuser._id)) ||
        (this.$store.state.olduser != null &&
          this.idlist.includes(this.$store.state.olduser._id))
      ) {
        // 上线
        if (this.$store.state.newuser != null) {
          // console.log("lll");
          // 上线的新用户正好发送了未读消息,修改该用户的在线状态
          let index = this.idlist.findIndex((item) => {
            return item == this.$store.state.newuser._id;
          });

          this.userlist[index].isOnline = true;
        }
        // 下线
        if (this.$store.state.olduser != null) {
          // console.log("222");
          // 原来在线的有未读消息的好友下线，修改该用户的在线状态
          let index = this.idlist.findIndex((item) => {
            return item == this.$store.state.olduser._id;
          });

          this.userlist[index].isOnline = false;
        }

        return this.userlist;
      } else {
        return this.userlist;
      }
    },
  },
  mounted() {
    // 获取当前用户的好友列表
    getAlluser({ _id: this.$store.state.userdata._id }).then((res) => {
      //   console.log(res);
      if (res.code == 200) {
        let data1 = res.data.filter((item) => {
          return item._id != this.$store.state.userdata._id;
        });

        this.userlist = data1;
        
        this.idlist = this.userlist.map((item) => {
          // console.log(item)
          return item._id;
        });

        // console.log(this.idlist)
      }
    });
  },
};
</script>

<style scoped>
.userlist {
  background-color: #fff;
  height: calc(100vh - 100px);
  overflow: scroll;
}
ul {
  height: 1500px;
  background-color: blue;
}
</style>